<template>
    <div>
        <!-- 按钮组件 -->
        <div class="nav">
                <Button type="primary" @click="add()">添加</Button>
                <Button @click="removemany">删除多个</Button>
                <Input v-model="value" placeholder="请输入产品名称" style="width: 300px" />
                <Button @click="seatch">搜索</Button>
                <Modal v-model="modal12" draggable scrollable :title="titles" @on-ok="ok" @on-cancel="cancel">
                    <Form :model="formItem" :label-width="80">
                        <FormItem label="产品名称：">
                            <Input v-model="formItem.productname" placeholder="Enter something..."></Input>
                        </FormItem>
                        <FormItem label="产品简介：">
                            <Input v-model="formItem.productbrief" placeholder="Enter something..."></Input>
                        </FormItem>
                        <FormItem label="零售价：">
                            <Input v-model="formItem.retailprice" placeholder="Enter something..."></Input>
                        </FormItem>
                        <FormItem label="活动价：">
                            <Input v-model="formItem.activityprice" placeholder="Enter something..."></Input>
                        </FormItem>
                        <FormItem label="进价：">
                            <Input v-model="formItem.purchaseprice" placeholder="Enter something..."></Input>
                        </FormItem>
                        <FormItem label="团购价：">
                            <Input v-model="formItem.groupbuyingprice" placeholder="Enter something..."></Input>
                        </FormItem>
                        <FormItem label="库存：">
                            <Input v-model="formItem.stock" placeholder="Enter something..."></Input>
                        </FormItem>
                        <FormItem label="进货渠道：">
                            <Input v-model="formItem.channel" placeholder="Enter something..."></Input>
                        </FormItem>
                        <FormItem label="所属类别：">
                            <Input v-model="formItem.category" placeholder="Enter something..."></Input>
                        </FormItem>
                    </Form>
                </Modal>
        </div>
        <!-- 数据列表 -->
        <div class="div">
            <Table border ref="selection" :columns="columns" :stripe="true" :data="listdata" class="table" @on-select="select" @on-select-all="checkall" @on-select-all-cancel="cancelall">
                <template slot-scope="{row}" slot="action">
                    <Button type="primary" size="small" style="margin-right: 5px" @click="updata(row)">修改</Button>
                    <Button type="error" size="small" @click="remove(row._id)">删除</Button>
                </template>
            </Table>
            <Button @click="handleSelectAll(true)" style="margin-right: 5px" >全选</Button>
            <Button @click="handleSelectAll(false)" >取消全选</Button>
        </div>
        <!-- 分页组件 -->
        <div class="page">
            <Page :total="total" show-total @on-change="pagechange" show-sizer @on-page-size-change="sizechange" />
        </div>
    </div>
</template>
<script>
import { pub } from "../../mixins/pub"
export default {
    mixins:[pub],
        data () {
            return {
                 columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '产品名称',
                        key: 'productname'
                    },
                    {
                        title: '产品简介',
                        key: 'productbrief',
                        width:250
                    },
                    {
                        title: '零售价',
                        key: 'retailprice'
                    },
                    {
                        title: '活动价',
                        key: 'activityprice'
                    },
                    {
                        title: '进价',
                        key: 'purchaseprice'
                    },
                    {
                        title: '团购价',
                        key: 'groupbuyingprice'
                    },
                    {
                        title: '库存',
                        key: 'stock'
                    },
                    {
                        title: '进货渠道',
                        key: 'channel'
                    },
                    {
                        title: '所属类别',
                        key: 'category'
                    },
                    {
                        title: '入库时间',
                        width: 100,
                        key: 'ctime',
                        render: (h, params) => {
                            let time = this.$moment(params.row.ctime).format("YYYY-MM-DD hh:mm:s")
                            return h('div', [
                                h('span', time)
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 150,
                        align: 'center'
                    }
                ],formItem: {
                    productname:"",
                    productbrief:"",
                    retailprice:"",
                    activityprice:"",
                    purchaseprice:"",
                    groupbuyingprice:"",
                    stock:"",
                    channel:"",
                    category:""
                },
            }
        },
    }
</script>

<style lang="scss" scoped>
.use{
   text-align: center;
   Input{
       margin-bottom:10px;
   }
}
.nav{
    margin-bottom:10px;
    Button{
        margin-right:10px;
    }
}
.table{
    margin-bottom:10px;
}
.page{
        margin-top:10px;
    }
</style>